<template>
    <div id="rs-blog" class="rs-blog style1 pt-94 pb-100 md-pt-32 md-pb-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-12 mb-30  order-lg-1">
                    <div class="sec-title7 mb-20">
                        <h2 class="sub-title primary">一中快讯</h2> <span class="sub-text">News Flash</span> <a
                            href="/SchoolStyle?pageType=2&pTitle=一中快讯&category=yzkx&type=yzzc" class="more">更多<i
                                class="wfls wflsfont wfls-qianjin"></i></a>
                    </div>
                    <div class="rs-carousel owl-carousel fixedScale owl-loaded owl-drag">
                        <div class="owl-stage-outer carousel-container">
                            <swiper  :breakpoints="breakpoints" :modules="modules" class="owl-stage" :slides-per-view="6"
                                :autoplay="{ delay: 4000, disableOnInteraction: false }" @slideChange="onSlideChange"  @swiper="onSwiper">
                                <swiper-slide class="owl-item cloned" v-for="(item, index) in items"
                                    >
                                    <div class="courses-item  courses-item-odd">
                                        <div class="img-part">
                                            <img :src="item.image" :alt="item.title">
                                        </div>
                                        <div class="content-part">
                                            <h4 class="title mt-20 mb-15 text-ellipsis">
                                                <a :href="item.link" :title="item.title">{{ item.title }}</a>
                                            </h4>
                                            <div class="images text-ellipsis-3"><span>{{ item.content }}</span></div>
                                        </div>
                                    </div>

                                </swiper-slide>
                            </swiper>
                        </div>
                        <div class="carousel-dots owl-dots">
                            <div :class="item.active ? 'owl-dot active' : 'owl-dot'" v-for="(item, index) in items"
                                @click="goToSlideByIndex(index)">
                                <span class="dot" :key="index"></span>
                            </div>
                        </div>
                        <!-- 其他代码保持不变 -->
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-30 order-lg-0">
                    <div class="sec-title7 mb-20">
                        <h2 class="sub-title primary">文化与交流</h2> <span class="sub-text">Culture and Communication</span>
                    </div>
                    <div class="row no-gutter white-bg blog-item" v-for="item in CultureList">
                        <div class="col-md-12">
                            <div class="blog-content">
                                <h3 class="title text-ellipsis"><a :href="'/SchoolContentDetails?pageType=5&pTitle=文化交流&articleId='+item.articleId"
                                        title="送教送培下乡研讨活动">{{item.title}}</a></h3>
                                <ul class="blog-meta">
                                    <li><i class="fa fa-calendar"></i>{{item.createTime}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-20">
                        <a href="/SchoolStyle?pageType=5&pTitle=通知公告&category=whyjl&type=yzzc" class="more">更多<i
                                class="wfls wflsfont wfls-qianjin"></i></a></div>
                </div>
                <div class="col-lg-3 col-md-6 mb-30 md-mb-0 order-lg-2">
                    <div class="sec-title7 mb-20">
                        <h2 class="sub-title primary">通知公告</h2> <span class="sub-text">Notice</span>
                    </div>
                    <div class="row no-gutter white-bg blog-item" v-for="(item,index) in publicListData" :key="index">
                        <div class="col-md-12">
                            <div class="blog-content">
                                <h3 class="title text-ellipsis"><a :href="getPublistHref(item.articleId)"
                                        title="《致全球校友的一封信》">{{ item.title }}</a></h3>
                                <ul class="blog-meta">
                                    <li><i class="fa fa-calendar"></i>{{ item.createTime }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
   
                    <div class="mt-20"><a href="/SchoolContent?pageType=3&pTitle=通知公告&category=tzgg&type=yzzc" class="more">更多<i
                                class="wfls wflsfont wfls-qianjin"></i></a></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import '@/assets/css/public.css'
import '@/assets/css/main.css'
import { ref, onMounted, onUnmounted } from 'vue';
import { Autoplay, Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import {publicList,newsFlashList,getCultureList} from '@/api/api.js'
import img1 from '@/assets/images/640.jpg'
import img2 from '@/assets/images/641.jpg'
import 'swiper/css';
const swiperRef = ref(null);
const items = ref([
    // 这里填充您的轮播项数据
    {
        title: '“风雨多经志愈坚，关山初度路更长”——株洲市第一中学办学60年回顾暨高质量发展大会 系列二之责任与挑战',
        content: '2404班的《蝴蝶泉边》以清新的旋律和真挚的情感拉开了比赛的序幕；2405班的《我们都是追梦人》用温暖的歌声点燃了全场的热情；2403班的《我和我的祖国》则以磅礴的气势和深情的演唱赢得了阵阵掌声。每一支队伍都展现了独特的创意与风采，从背景设计到队形编排，从演唱技巧到舞台表现，无不体现出同学们的用心与努力。',
        image: img1,
        link: '/SchoolStyleDetails?pageType=2&pTitle=一中快讯',
        active: true,
    },
    {
        title: '团省委书记刘治田一行来校调研共青团工作',
        content: '悠悠发酵香，传承岁月长。在生物科学的广袤天地间，传统发酵技术承载着千年智慧，如同一束光，照亮探索生命奥秘之路。为培育学生生物学核心素养，践行育人使命，提升学生对生物学科的学习兴趣，株洲市第一中学高二年级生物备课组倾心打造了一场传统发酵技术竞赛盛宴。',
        image: img2,
        link: '/',
        active: false,
    },
    
    // 更多项...
]);
function onSwiper(swiper) {
  swiperRef.value = swiper; // 将Swiper实例保存到ref中以便后续访问
}
const modules = [Autoplay, Navigation]
const breakpoints = {
    0: {
        slidesPerView: 1,
        spaceBetween: 0,
    },
    // 当屏幕宽度大于等于 640px 时
    640: {
        slidesPerView: 2,
        spaceBetween: 10,
    },
    992: {
        slidesPerView: 1,
        spaceBetween: 10,
    },
    // 当屏幕宽度大于等于 1024px 时
    1024: {
        slidesPerView: 1,
        spaceBetween: 0,
    },
    // 当屏幕宽度大于等于 1280px 时
    1280: {
        slidesPerView: 1,
        spaceBetween: 0,
    },
};

const goToSlideByIndex = (index) => {
  if (swiperRef.value) {
    // Swiper 的索引是从 0 开始的
    items.value.forEach((item, i) => {
      item.active = i === index;
    })
    swiperRef.value.slideTo(index, 0); // 第二个参数是过渡时间，0 表示无过渡
  }
};
const onSlideChange = (swiper)=>{
    items.value.forEach((item, i) => {
      item.active = i === swiper.activeIndex;
    })
}
const publicListData = ref([])
const getPublistHref = (id) => {
    return `/SchoolStyleDetails?pageType=3&pTitle=通知公告&articleId=${JSON.stringify(id)}`
}
const CultureList = ref([])
onMounted(() => { 
    getCultureList('tzgg','yzzc', true).then((res) => {
        publicListData.value = res.data.map((item)=>{
          let items =  {
                ...item,
                title: item.title,
                content: removeHTMLTags(item.content),
                image: item.cover,
            }
            return items
        })
    })
    getCultureList('yzkx','yzzc' ).then((res) => {
        items.value = res.data.map((item)=>{
          let items =  {
                ...item,
                title: item.title,
                content: removeHTMLTags(item.content),
                image: item.cover,
            }
            return items
        })
    })
    function removeHTMLTags(str) {
    return str.replace(/<[^>]*>/g, '');
    }
    // newsFlashList().then((res)=>{
   
    // })
    getCultureList('whyjl','yzzc').then((res)=>{
        CultureList.value = res.data
    })
})
</script>
<style lang="scss" scoped>
.images {
    min-height: 78px;
}

.owl-dots:before {
    content: "";
    position: absolute;
    width: 150px;
    height: 2px;
    left: 0;
    bottom: 3px;
    margin-top: -1px;
    background: linear-gradient(to left, #234b7e 0%, #234b7e 60%, #234b7e 60%, #fff 100%);
}

.owl-dots:after {
    content: "";
    position: absolute;
    width: 150px;
    height: 2px;
    right: 0;
    bottom: 3px;
    margin-top: -1px;
    background: linear-gradient(to right, #234b7e 0%, #234b7e 60%, #234b7e 60%, #fff 100%);
}
</style>